<style>
    html{
        background-color: #f2f2f2;
    }
    .content-body{
        background-color: transparent;
    }
    /* 卡片面板 */
    .layui-card{margin-bottom: 10px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
    .layui-card:last-child{margin-bottom: 0;}
    .layui-card-header{position: relative; height: 42px; line-height: 42px; padding: 0 15px; border-bottom: 1px solid #f6f6f6; color: #333; border-radius: 2px 2px 0 0; font-size: 14px;}
    .layui-card-body{position: relative; padding: 10px 15px; line-height: 24px;}
    th,td{
        text-align: center;
    }
</style>

<div class="container-fluid">
    <div class="row layui-card">
        <div class="layui-card-body">
            <a href="{:url('index/index')}">主页</a>
            <span>/</span>
            <span>资产基本统计</span>
        </div>
    </div>

    <div class="row layui-card">
        <div class="layui-card-header" style="height: 45px;">
            <div class="form-inline">
                <label>归档年月</label>
                <input id="ym" class="form-control" value="{$ym}" style="width: 120px;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label>隶属单位</label>
                <select id="belong" class="form-control" style="width: 120px;">
                    <option value="tju">天津大学</option>
                    <option value="fz">附中</option>
                    <option value="fx">附小</option>
                    <option value="nrs">内燃所</option>
                    <option value="all">合计</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-info btn-sm" onclick="clickStatistics()">统计</button>
                &nbsp;&nbsp;<button class="btn btn-default btn-sm" onclick="clickPrint()">打印表格</button>
                &nbsp;&nbsp;<button class="btn btn-success btn-sm" onclick="clickExport()">导出Excel</button>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>所属单位</th>
                    <th>资产类别</th>
                    <th>数量</th>
                    <th>价值（元）</th>
                </tr>
                </thead>
                <tbody>
                {volist name='showList' id='vo'}
                <tr>
                    {if $i == 1}
                    <td rowspan="6">{$vo.BELONG}</td>
                    {/if}
                    <td>{$vo.TYPE_NAME}</td>
                    <td>{$vo.NUM}</td>
                    <td>{$vo.VALUE}</td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>

    <div class="row layui-card">
        <div id="chart" style="width: 100%;height: 600px;"></div>
    </div>

</div>

<script src="__STATIC__/js/echarts.min.js"></script>

<script>

    var showList = {:json_encode($showList)};
    console.log(showList);

    var myChart = echarts.init(document.getElementById('chart'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '资产基本统计'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        legend: {
            data:['价值','数量']
        },
        xAxis: {
            data: ["土地","建筑","设备","家具","图书","合计"]
        },
        yAxis: {},
        series: [{
            name: '价值',
            type: 'bar',
            barWidth:"20%",
            data: [showList[0]['VALUE2'], showList[1]['VALUE2'], showList[2]['VALUE2']
                , showList[3]['VALUE2'], showList[4]['VALUE2'], showList[5]['VALUE2']]
        },{
            name: '数量',
            type: 'bar',
            barWidth:"20%",
            data: [showList[0]['NUM'], showList[1]['NUM'], showList[2]['NUM']
                , showList[3]['NUM'], showList[4]['NUM'], showList[5]['NUM']]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(function () {
        $("#belong").val('{$belong}');
    });

    function clickStatistics() {
        var ym = $("#ym").val();
        var belong = $("#belong").val();
        if(ym == ''){
            layer.alert('请输入归档年月，如：2018-10',{icon:2});
            return;
        }
        location.href = "{:url('statistics/basicInfo')}?ym=" + ym + "&belong=" + belong;
    }

    function clickPrint() {
        var ym = $("#ym").val();
        var belong = $("#belong").val();
        if(ym == ''){
            layer.alert('请输入归档年月，如：2018-10',{icon:2});
            return;
        }

        var url = "{:url('statistics/printBasicInfo')}?ym=" + ym + "&belong=" + belong;
        window.open(url);
    }

    function clickExport() {
        var ym = $("#ym").val();
        var belong = $("#belong").val();
        if(ym == ''){
            layer.alert('请输入归档年月，如：2018-10',{icon:2});
            return;
        }
        location.href = "{:url('statistics/exportBasicInfo')}?ym=" + ym + "&belong=" + belong;
    }

</script>